<template>
	<view class="page-wrapper" v-if="loginStatus === 1">
		<image src="../../static/img/member/bg.png" class="bg" mode="widthFix"></image>
		<div class="info">
			<image :src="userInfo.headimgurl || '../../static/img/public/avatar.png'" class="avatar" mode="widthFix"></image>
			<div class="info-name">
				<span v-text="userInfo.nickname || '未登录'"></span>
				<p>ID: {{ userInfo.id || '' }}</p>
			</div>
			<div class="info-right">
				<!-- <image @click="goSetting" class="setting" src="../../static/img/public/setting.png" mode="widthFix"></image> -->
				<div class="gold-detail" @click="goBalanceDetail">
					<image src="../../static/img/member/clock.png" mode="widthFix"></image>
					<span>余额明细</span>
				</div>
			</div>
		</div>
		<div class="my-order">
			<h3>我的订单</h3>
			<ul>
				<li @click="goOrder(0)">
					<div>
						<span>全部订单</span>
						<image src="../../static/img/member/all.png" mode="widthFix"></image>
					</div>
					<span>全部</span>
				</li>
				<li @click="goOrder(1)">
					<div><image src="../../static/img/member/unpay.png" mode="widthFix"></image></div>
					<span>待付款</span>
				</li>
				<li @click="goOrder(2)">
					<div><image src="../../static/img/member/success.png" mode="widthFix"></image></div>
					<span>已完成</span>
				</li>
			</ul>
		</div>
		<div class="my-gold">
			<div class="my-gold-title">
				<div class="my-gold-title-r"><h3>我的财富</h3></div>

				<button @click="gocode">推广</button>
			</div>
			
				
			
			
			<div class="my-gold-top">
				<div>
					<span>
						<span>{{ isView ? (parseInt(balance.balance) + parseInt(balance.frozen)).toFixed(2) : '****' }}</span>
						<image @click="changeView" :src="isView ? '../../static/img/member/eye.png' : '../../static/img/member/close-eye.png'" mode="widthFix"></image>
					</span>
					<!-- <p  @click="goBalanceDetail">账户余额</p> -->
				</div>
				<div>
					<span><image src="../../static/img/member/ma.png" mode="widthFix" style="width: 100rpx;" @click="gocode"></image></span>
				</div>
			</div>
		
			

			<div class="my-gold-center">
				<!-- <div>
					<div @click="goBalanceDetail">
						<span>
							{{isView ? balance.balance : '****'}}
							<span>查看详情</span>
						</span>
						<p>提现</p>
					</div>
				</div>
				<div>
					<div>
						<span>
							{{isView ? balance.frozen : '****'}}
						</span>
						<p>冻结金币</p>
					</div>
				</div> -->
			</div>
			<div class="my-gold-bottom">
				<!-- <div>
					<div>
						<span>
							{{isView ? balance.profit : '****'}}
						</span>
						<p>可收益金币</p>
					</div>
				</div>
				<div>
					<div>
						<span>
							{{isView ? balance.total_profit : '****'}}
						</span>
						<p>累计收益</p>
					</div>
				</div> -->
			</div>
		</div>

		<div class="other">
			<ul>
				<!-- <li @click="goTopUp">
					<span>
						<image src="../../static/img/member/to-up.png" mode="widthFix"></image>
						<p>充值</p>
					</span>
					<image src="../../static/img/public/right.png" mode="widthFix"></image>
				</li> -->
			<!-- 	<li @click="gomianxiang">
					<span>
						<image src="../../static/img/member/to-up.png" mode="widthFix"></image>
						<p>免享星</p>
					</span>
					<image src="../../static/img/public/right.png" mode="widthFix"></image>
				</li> -->
				<li @click="goCard">
					<span>
						<image src="../../static/img/tabbar/card4.png" mode="widthFix"></image>
						<p>我的会员卡</p>
					</span>
					<image src="../../static/img/public/right.png" mode="widthFix"></image>
				</li>
<!--				<li @click="gohetong">-->
<!--					<span>-->
<!--						<image src="../../static/img/member/hetong.png" mode="widthFix"></image>-->
<!--						<p>服务合同</p>-->
<!--					</span>-->
<!--					<image src="../../static/img/public/right.png" mode="widthFix"></image>-->
<!--				</li>-->
				<li @click="goAddress">
					<span>
						<image src="../../static/img/member/position.png" mode="widthFix"></image>
						<p>地址管理</p>
					</span>
					<image src="../../static/img/public/right.png" mode="widthFix"></image>
				</li>
				<!-- <li @click="logOff">
					<span>
						<image src="../../static/img/member/position.png" mode="widthFix"></image>
						<p>退出登录</p>
					</span>
					<image src="../../static/img/public/right.png" mode="widthFix"></image>
				</li> -->
			</ul>
		</div>
	</view>
	<view class="un-login" v-else-if="loginStatus === 2">
		<div>
			<image src="../../static/img/public/order-empty.png" mode="widthFix"></image>
			<span>用户未登录</span>
			<button @click="goLogin()">去登录</button>
		</div>
	</view>
</template>

<script>
import { api } from '@/util/api.js';

export default {
	data() {
		return {
			userInfo: null,
			balance: {},
			loginStatus: 0,
			isView: false
		};
	},
	methods: {
		goCard(){
			uni.navigateTo({
				url: './card/card'
			});
		},
		gocode() {
			uni.navigateTo({
				url: './code/code?name='+this.userInfo.nickname
			});
		},
		goAddress() {
			uni.navigateTo({
				url: './address/address'
			});
		},
		gohetong() {
			uni.navigateTo({
				url: './gohetong/gohetong'
			});
		},
		gomianxiang() {
			uni.navigateTo({
				url: './mianxiang/mianxiang'
			});
		},
		goTopUp() {
			uni.navigateTo({
				url: 'top-up/top-up'
			});
		},
		goWithdraw() {
			uni.navigateTo({
				url: 'withdraw/withdraw'
			});
		},
		goBalanceDetail() {
			uni.navigateTo({
				url: 'balanceDetail/balanceDetail'
			});
		},
		goOrder(index) {
			uni.navigateTo({
				url: 'myOrder/myOrder?index=' + index
			});
		},
		goSetting() {
			uni.navigateTo({
				url: 'setting/setting'
			});
		},
		goLogin() {
			uni.navigateTo({
				url: '../Login/Login'
			});
		},
		getBanlance() {
			api.getMemberBanlance({}, res => {
				this.balance = res.data;
				// console.log(this.balance)
			});
		},
		// getFortuneStar() {
		// 	api.getMyFortuneStar({}, res => {
		// 		this.FortuneStar = res.data;
		// 		console.log(this.FortuneStar)
		// 	})

		// },
		changeView() {
			this.isView = !this.isView;
		},
		
		logOff(){
			let app = getApp();
			app.globalData.loginStatus=2;
			this.loginStatus = 2
			uni.setStorageSync('loginStatus', 400);
			uni.reLaunch({
				url: '/pages/index/index'
			});
		},
		
	},
	onLoad() {},

	onShow() {
		let app = getApp();
		if (app.globalData.loginStatus !== 1) {
			uni.showLoading({
				mask: 'true'
			});
			app.login().then(res => {
				if (res.code === 200) {
					this.userInfo = app.globalData.member;
					this.loginStatus = 1;
					this.getBanlance();
					uni.hideLoading();
				} else {
					uni.hideLoading();
					this.loginStatus = 2;
				}
			});
		} else {
			this.userInfo = app.globalData.member;
			this.loginStatus = 1;
			this.getBanlance();
			uni.hideLoading();
		}
	}
};
</script>

<style scoped>
page {
}
.page-wrapper {
	box-sizing: border-box;
	padding: 140rpx 30rpx 30rpx 30rpx;
}
.bg {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.info {
	width: 100%;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
.avatar {
	height: 100rpx;
	width: 100rpx;
	display: inline-block;
	border-radius: 50%;
	margin-right: 20rpx;
}
.info-name {
	display: inline-block;
	color: #ffffff;
}
.info-name > span {
	font-size: 30rpx;
}
.info-name > p {
	font-size: 18rpx;
	color: #007ffb;
	background-color: #ffffff;
	border-radius: 12.5rpx;
	box-sizing: border-box;
	padding: 0 10rpx 0 10rpx;
	margin-top: 10rpx;
	opacity: 0.6898;
}

.info-right {
	position: absolute;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.info-right > .setting {
	width: 34rpx;
	margin-right: 20rpx;
}

.gold-detail {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	border-radius: 23.5rpx 0 0 23.5rpx;
	height: 47rpx;
	width: 164rpx;
	box-sizing: border-box;
	padding-left: 5rpx;
}
.gold-detail > image {
	width: 37rpx;
	height: 37rpx;
	margin-right: 10rpx;
}
.gold-detail > span {
	font-size: 22rpx;
	color: #018afb;
}

.my-order {
	background-color: #ffffff;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	margin-top: 40rpx;
}
.my-order > h3 {
	font-size: 30rpx;
	color: #333333;
}
.my-order > ul {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 40rpx;
}
.my-order > ul > li {
	width: 20%;
	display: inline-block;
	text-align: center;
}
.my-order > ul > li > div {
	width: 41rpx;
	display: inline-block;
	position: relative;
}
.my-order > ul > li > div > span {
	position: absolute;
	left: 100%;
	bottom: 98%;
	display: inline-block;
	font-size: 14rpx;
	color: #ffffff;
	background-image: linear-gradient(to right, #fd7000, #fe5000);
	height: 22rpx;
	width: 74rpx;
	border-radius: 12rpx 8rpx 10rpx 0;
	line-height: 22rpx;
	text-align: center;
}
.my-order > ul > li > div > image {
	width: 100%;
}
.my-order > ul > li > span {
	display: block;
	color: #666666;
	font-size: 22rpx;
}

.my-gold {
	background-color: #ffffff;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	margin-top: 20rpx;
}
.my-gold-title {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
}
.my-gold-title-r {
}
.my-gold-title-r > h3 {
	font-size: 30rpx;
	color: #333333;
}
.my-gold-title-r > span {
	color: #fd6e00;
	font-size: 18rpx;
}
.my-gold-title > button {
	/* 	background-image: linear-gradient(to right, #FD6F00, #FD5200); */
	border-radius: 29rpx;
	color: #333333;
	height: 58rpx;
	line-height: 58rpx;
	width: 129rpx;
	font-size: 28rpx;
	position: absolute;
	right: 48rpx;
}

.my-gold-top {
	width: 100%;
	display: flex;
	align-items: center;
}
.my-gold-top > div {
	width: 45%;
	height: 150rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.my-gold-top > div:nth-child(1) {
	align-items: flex-start;
}
.my-gold-top > div:nth-child(2) {
	align-items: flex-end;
}
.my-gold-top > div > span {
	font-size: 62rpx;
	font-weight: bold;
	color: #0086fb;
	/* transform: scale(0.8,1); */
	display: flex;
	align-items: center;
	font-family: 'DIN-Condensed-Bold';
}
.my-gold-top > div > span > span {
	font-size: 58rpx;
	font-weight: bold;
	color: #0086fb;
	/* transform: scale(0.8,1); */
	font-family: 'DIN-Condensed-Bold';
}
.my-gold-top > div > span > image {
	width: 44rpx;
	margin-left: 10rpx;
}

.my-gold-top > div > p {
	color: #666666;
	font-size: 26rpx;
	margin-top: 30rpx;
}

.my-gold-center {
	width: 100%;
	display: flex;
	align-items: center;
}
.my-gold-center > div {
	width: 50%;
	height: 200rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 1rpx solid #e6e6e6;
}
.my-gold-center > div:nth-child(1) {
	border-right: 1rpx solid #e6e6e6;
	margin: 0px -1px -1px 0px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	padding-left: 50rpx;
}
.my-gold-center > div:nth-child(2) {
	border-left: 1rpx solid #e6e6e6;
	margin: 0px -1px -1px 0px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	box-sizing: border-box;
	padding-right: 50rpx;
}
.my-gold-center > div:nth-child(1) > div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.my-gold-center > div:nth-child(2) > div {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.my-gold-center > div > div > span {
	font-size: 45rpx;
	font-weight: blod;
	position: relative;
	font-family: 'DIN-Condensed-Bold';
}
.my-gold-center > div > div > span > span {
	position: absolute;
	left: 100%;
	bottom: 98%;
	display: inline-block;
	font-size: 14rpx;
	color: #ffffff;
	background-image: linear-gradient(to right, #fd7000, #fe5000);
	height: 22rpx;
	line-height: 22rpx;
	text-align: center;
	width: 74rpx;
	border-radius: 12rpx 8rpx 10rpx 0;
}

.my-gold-center > div > div > p {
	font-size: 24rpx;
	color: #999999;
	margin-top: 10rpx;
}

.my-gold-bottom {
	width: 100%;
	display: flex;
	align-items: center;
}
.my-gold-bottom {
	width: 100%;
	display: flex;
	align-items: center;
}
.my-gold-bottom > div {
	width: 50%;
	height: 200rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 1rpx solid #e6e6e6;
}
.my-gold-bottom > div:nth-child(1) {
	border-right: 1rpx solid #e6e6e6;
	margin: 0px -1px -1px 0px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	padding-left: 50rpx;
}
.my-gold-bottom > div:nth-child(2) {
	border-left: 1rpx solid #e6e6e6;
	margin: 0px -1px -1px 0px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	box-sizing: border-box;
	padding-right: 50rpx;
}
.my-gold-bottom > div:nth-child(1) > div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.my-gold-bottom > div:nth-child(2) > div {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.my-gold-bottom > div > div > span {
	font-size: 45rpx;
	font-weight: blod;
	font-family: 'DIN-Condensed-Bold';
}

.my-gold-bottom > div > div > p {
	font-size: 24rpx;
	color: #999999;
	margin-top: 10rpx;
}

.other {
	width: 100%;
	background-color: #ffffff;
	border-radius: 12rpx;
	margin-top: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
}
.other > ul {
	width: 100%;
}
.other > ul > li {
	width: 100%;
	display: flex;
	align-items: center;
	position: relative;
	height: 100rpx;
	border-bottom: 1rpx solid #e6e6e6;
}
.other > ul > li:last-child {
	border: none;
}
.other > ul > li > span {
	display: flex;
	align-items: center;
}
.other > ul > li > span > image {
	width: 34rpx;
	margin-right: 20rpx;
}
.other > ul > li > span > p {
}
.other > ul > li > image {
	width: 17rpx;
	position: absolute;
	right: 10rpx;
	vertical-align: middle;
}

.un-login {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #ffffff;
	height: 100%;
	width: 100%;
}
.un-login > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.un-login > div > image {
	width: 328rpx;
}
.un-login > div > span {
	color: #666666;
	font-size: 24rpx;
	margin-top: 30rpx;
}
.un-login > div > button {
	margin-top: 30rpx;
	background-image: linear-gradient(to right, #0973f7, #0286fa);
	width: 602rpx;
	height: 90rpx;
	border-radius: 45rpx;
	border: none;
	color: #ffffff;
	font-size: 34rpx;
}
</style>
